<template>
    <div class="app-container">
        <div>
            <p class="dialogTitle title">当前地震事件:
                <span v-if="currentEvent">{{ currentEvent.eventName }}</span>
                <span v-else>请在地震事件管理中设置当前地震事件</span>
            </p>
        </div>

        <el-form :model="queryParams" ref="queryRef" :inline="true" label-width="150px">
            <!-- <el-form-item label="地震事件名称" prop="structureType">
                <el-select v-model="queryParams.structureType" placeholder="请选择" clearable>
                    <el-option
                        v-for="item in [{ label: '2022年5月20日四川汉源4.8级地震', value: '2022年5月20日四川汉源4.8级地震' }, { label: '2022年4月15日四川玉林5.6级地震', value: '2022年4月15日四川玉林5.6级地震' }]"
                        :key="item.value" :label="item.label" :value="item.value">
                    </el-option>
                </el-select>
            </el-form-item> -->
            <el-form-item label="评估子区（可多选）" prop="evaluationSubareaType">
                <el-select v-model="queryParams.evaluationSubareaType" multiple placeholder="请选择" clearable>
                    <el-option v-for="item in option" :key="item.xstmId" :label="item.evaluationSubareaName"
                        :value="item.xstmId">
                    </el-option>
                </el-select>
            </el-form-item>
            <!-- <el-form-item label="补充调查" prop="samplingPointName">
                <el-select v-model="queryParams.samplingPointName" placeholder="请选择" clearable>
                    <el-option
                        v-for="item in [{ label: '全部', value: '999' }, { label: '调查数据', value: '0' }, { label: '补充调查数据', value: '1' }]"
                        :key="item.value" :label="item.label" :value="item.value">
                    </el-option>
                </el-select>
            </el-form-item> -->

            <el-form-item>
                <el-button type="primary" @click="handleCount">统计</el-button>
            </el-form-item>
        </el-form>

        <el-row :gutter="20">
            <el-col :span="8">
                <div class="structureType">
                    <h4>结构类型面积占比</h4>
                    <div id="structureType-pie" style="width: 100%;height:420px;"></div>
                </div>
            </el-col>
            <el-col :span="8">
                <div class="damageArea">
                    <h4>不同破坏程度的面积占比</h4>
                    <div id="damageArea-pie" style="width: 100%;height:420px;"></div>
                </div>
            </el-col>
            <!-- <el-col :span="8">
                <div class="geologicalDisaster">
                    <h4>地质灾害类别占比</h4>
                    <div id="geologicalDisaster-pie" style="width: 100%;height:420px;"></div>
                </div>
            </el-col> -->
        </el-row>


    </div>
</template>

<script setup name="commentAreaClassification">
import useEventStore from "@/store/modules/event";
import {
    getDamageAreaProportion,  //评估区分类统计
    getStructureAreaProportion, // 结构类型面积占比
    getTaskListByXsemId  // 获取当前地震事件下所有的评估子区
} from "@/api/samplingPointData/commentAreaClassification.js"
const currentEvent = computed(() => useEventStore().currentEvent);
import * as echarts from "echarts";


const data = reactive({
    queryParams: {
        //structureType: "",
        evaluationSubareaType: "",
        samplingPointName: ""
    },
})
const { queryParams } = toRefs(data)
//评估子区
const option = ref([]);
function findAll() {
    if (currentEvent.value) {
        getTaskListByXsemId({ xsemId: currentEvent.value.id }).then(res => {
            option.value = res.data
        })
    } else {
        option.value = []
    }
}

const handleCount = () => {
    onSearch()
    onSearch2()
}

//echarts图
let m_chartPie = null
let m_chartPie2 = null
let m_chartPie3 = null
const onSearch = () => {
    if (currentEvent.value) {
        let query = {
            xsemId: currentEvent.value.id,
            xstmIds: queryParams.value.evaluationSubareaType.join(','),
            // type: '1'
        }
        if (queryParams.value.samplingPointName !== '999') {
            query.type = queryParams.value.samplingPointName
        }
        getStructureAreaProportion(query).then((res) => {
            if (res.code === 200) {
                console.log(res)
                //结构类型面积占比饼图
                buildChartStructureTypePie(res.data)
            }
        }).catch(err => {
            console.log(err);
        }
        );
    }
};
//结构类型面积占比饼图
const buildChartStructureTypePie = (data) => {
    if (!m_chartPie) {
        m_chartPie = echarts.init(document.getElementById('structureType-pie'));
    }
    const pieOption = getPieOption(data)
    m_chartPie.clear()
    m_chartPie.setOption(pieOption);
}


const onSearch2 = () => {
    if (currentEvent.value) {
        let query = {
            xsemId: currentEvent.value.id,
            xstmIds: queryParams.value.evaluationSubareaType.join(','),
            // type: '1'
        }
        if (queryParams.value.samplingPointName !== '999') {
            query.type = queryParams.value.samplingPointName
        }
        getDamageAreaProportion(query).then((res) => {
            if (res.code === 200) {
                console.log(res)
                //不同破坏程度的面积占比饼图
                buildChartDamageAreaPie(res.data)
            }
        }).catch(err => {
            console.log(err);
        }
        );
    }
};
// 不同破坏程度的面积占比饼图
const buildChartDamageAreaPie = (data) => {
    if (!m_chartPie2) {
        m_chartPie2 = echarts.init(document.getElementById('damageArea-pie'));
    }
    const pieOption = getPieOption(data)
    m_chartPie2.clear()
    m_chartPie2.setOption(pieOption);
}

//需求不明确,暂时调不同破坏程度的面积占比的接口
// const onSearch3 = () => {
//     let query = {
//         xsemId: currentEvent.value.id,
//         xstmIds: queryParams.value.evaluationSubareaType.join(','),
//         type: '1'
//     }
//     getDamageAreaProportion(query).then((res) => {
//         if (res.code === 200) {
//             console.log(res)
//             //地质灾害类别占比饼图
//             buildChartGeologicalDisasterPie(res.data)
//         }
//     }).catch(err => {
//         console.log(err);
//     }
//     );
// };

//地质灾害类别占比饼图
// const buildChartGeologicalDisasterPie = (data) => {
//     if (!m_chartPie3) {
//         m_chartPie3 = echarts.init(document.getElementById('geologicalDisaster-pie'));
//     }
//     const pieOption = getPieOption(data)
//     m_chartPie3.clear()
//     m_chartPie3.setOption(pieOption);
// }


//getPieOption
const getPieOption = (pieData) => {
    const pieOption = {
        tooltip: {
            trigger: 'item'
        },
        legend: {
            bottom: 10,
            left: 'center',

        },
        series: [
            {
                //name: '',
                type: 'pie',
                radius: '50%',     //半径
                //具体数据
                data: pieData,
                emphasis: {
                    itemStyle: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                },
                itemStyle: {
                    normal: {
                        color: function (colors) {
                            var colorList = [
                                '#5ad8a6',
                                '#5b8ff9',
                                '#9479c3',
                                '#f6bd16',
                                '#f9c956',
                                '#75bedc',
                                '#C1EBDD',
                                '#FFC851',
                                '#5A5476',
                                '#1869A0',
                                '#FF9393'
                            ];
                            return colorList[colors.dataIndex];
                        },
                        label: {
                            show: true,
                            //formatter: '{b} : {c} ({d}%)' //带当前图例名 + 百分比
                            formatter: '{d}%' //只要百分比
                        }
                    },
                }
            }
        ]
    }
    return pieOption
}


onMounted(() => {
    setTimeout(() => {
        onSearch()
        onSearch2()
        //onSearch3()
        findAll();
    }, 200)
});

</script>


<style scoped lang="scss">
.structureType,
.damageArea,
.geologicalDisaster {
    //background: #fff;
    //box-shadow: 0 0 15px #4986bf;
    border: 1px solid #ccc;
    border-radius: 8px;
    opacity: 1;

    h4 {
        font-size: 20px;
        color: #333;
        font-weight: bold;
        //font-family: Microsoft YaHei;
        border-bottom: 1px solid #f3f3f3;
        padding: 15px 0;
        margin: 0;
        cursor: pointer;

        /*CSS伪类用法*/
        //div:after,
        &:before {
            content: "";
            height: 22px;
            width: 7px;
            background: #107ce5;
            border-radius: 0 4px 4px 0;
            display: inline-block;
            margin-right: 15px;
            vertical-align: text-top;
        }

    }
}
</style>